<script setup>
import { ref } from 'vue'
const num1 = ref()
const num2 = ref()
const operation = ref('+')
const result = ref()

function calcResult() {
    num1.value = new Number(num1.value)
    num2.value = new Number(num2.value)
    switch (operation.value) {
        case '+':
            result.value = num1.value + num2.value
            break;
        case '-':
            result.value = num1.value - num2.value
            break;
        case '*':
            result.value = num1.value * num2.value
            break;
        case '/':
            result.value = num1.value / num2.value
            break;
        default: console.log("您输入的运算符不存在");
    }
}

</script>

<template>
    <div>
        <input type="text" v-model="num1">
        <select v-model="operation">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="num2">
        <input type="button" @click="calcResult" value="=">
        <span>{{ result }}</span>
    </div>
</template>